<template>
  <div id="tripcancel">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="tripcancel_box">
      <div class="tripcancel_hd_box">
        <p class="tripcancel_hd">行程已取消</p>
        <p class="tripcancel_hd_text">请告诉我们取消原因，我们会努力为您提供更好的服务</p>
      </div>
      <div class="tripcancel_list">
        <md-radio
          class="tripcancel_radio_btn"
          ref="radio"
          :options="data"
          :default-index="0"
          icon="circle-right"
          icon-inverse="circle"
          icon-position="right"
          @change="onRadioChange"
        ></md-radio>
      </div>
      <div class="cancelBtn">
        <h6>若有问题请联系客服010-59716713</h6>
        <p @click="tripcancelbtn">确认提交</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabs, Icon, Field, InputItem, Toast, Radio, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '取消原因',
      IsTopbar: true,
      cancelText: '行程有变',
      data: [
        {
          text: '行程有变'
        }
      ]
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    let params = {
      order_no: this.$route.query.orderno
    };
    Loading.show();
    http.post('pakj/order/getCOrderLText', params).then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        if (res.data.data.reason_label) {
          var textArry = res.data.data.reason_label.split(',');
          this.data = [];
          for (var i in textArry) {
            var textObj = {
              text: textArry[i],
              value: (parseInt(i) + 1).toString()
            };
            this.data.push(textObj);
          }
          // this.data.push({
          //     text: '其它',
          //     value: ''
          // });
        }
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    onRadioChange(obj) {
      this.cancelText = obj.text;
    },
    tripcancelbtn() {
      if (this.$route.query.orderno) {
        let params = {
          order_no: this.$route.query.orderno,
          label: this.cancelText,
          reason: ''
        };
        Loading.show();
        http.post('/pakj/order/saveCOrderReason', params).then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            if (Utils.isApp()) {
              Dialog.alert({
                title: '提示',
                content: '提交成功',
                confirmText: '确定',
                onConfirm: () => {
                  // 判断当前环境是否在app
                  /* eslint-disable */
                  var os = Utils.getOSName();
                  if ((os === 'Linux' || os === 'Android') && handler) {
                    handler.pageOut();
                  } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
                    window.webkit.messageHandlers.pageOut.postMessage(JSON.stringify(''));
                  }
                }
              });
            } else {
              this.$router.push({
                name: 'OrderDetail',
                query: {
                  orderno: this.$route.query.orderno
                }
              });
            }
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到订单号',
          confirmText: '确定'
        });
      }
    }
  },
  computed: {}
};
</script>

<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#tripcancel {
  height: 100vh;
  background-color: color-primary-background;

  .md-field {
    background: transparent;
    padding: 0;

    .md-field-content {
      width: 100%;

      .md-field-item {
        padding: 0px 30px;
      }
    }
  }

  .md-radio-item {
    margin-bottom: 10px;
  }

  .md-icon-circle-right {
    width: 36px;
    height: 36px;
  }

  .md-icon-circle {
    width: 36px;
    height: 36px;
  }
}

.tripcancel_box {
}

.tripcancel_hd_box {
  background-color: #fff;
  height: 160px;
}

.tripcancel_hd {
  font-size: 30px;
  color: #333;
  text-align: center;
  padding-top: 38px;
}

.tripcancel_hd_text {
  font-size: 26px;
  color: #666;
  text-align: center;
  padding-top: 8px;
}

.tripcancel_list {
  margin-top: 10px;
}

.cancelBtn {
  margin-top: 30px;
  width: 100%;
}

.cancelBtn h6 {
  text-align: center;
  color: #999;
  font-weight: 400;
  margin-bottom: 10px;
}

.cancelBtn p {
  background-color: #FF6917;
  height: 98px;
  line-height: 98px;
  color: #fff;
  text-align: center;
  margin: 20px 20px;
  border-radius: 10px;
  font-size: 36px;
}

.complaints_input {
  background-color: #fff;
  margin-top: 2px;
  padding: 16px 30px 16px 30px;

  .input_calc {
    font-size: 24px;
    color: rgba(153, 153, 153, 1);
    line-height: 24px;
    width: 100%;
    text-align: right;
  }
}

.complaints_input textarea {
  border: none;
  resize: none;
  font-size: 26px;
  width: 100%;
  height: 160px;
  padding: 0px 0px;
  outline: none;
}
</style>
